<template>
  <GlobalPage>
    <div class="table-box">
      <el-table
        :data="Data.tableData"
        stripe
        style="font-size: 10px; width: 100%"
      >
        <el-table-column type="selection" width="35" align="center">
        </el-table-column>
        <el-table-column prop="id" label="#" width="40" align="center" />
        <el-table-column prop="name" label="图片" width="45">
          <template #default="scope">
            <div class="user-table-avatar">
              <img
                class="user-table-avatar-img"
                :src="scope.row.image"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="英文名称" />
        <el-table-column prop="code" label="编号" width="60" align="center" />
        <el-table-column prop="mark" label="Mark" width="60" align="center" />
        <el-table-column
          prop="childrenNumber"
          label="省份"
          width="50"
          align="center"
        >
          <template #default="{ row }">
            <el-tag size="small">{{ row.childrenNumber }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="65" align="center">
          <template #default="{ row }">
            <el-switch
              :size="small"
              v-model="row.state"
              inline-prompt
              :active-value="1"
              active-text="正常"
              inactive-text="停用"
              :inactive-value="0"
              @change="changeState(row, index)"
            />
          </template>
        </el-table-column>

        <el-table-column width="50" fixed="right" label="操作" align="center">
          <template #default="{ row, $index: index }">
            <el-dropdown>
              <el-button :icon="MoreFilled" circle />
              <template #dropdown>
                <el-dropdown-menu :size="small">
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>限制</el-dropdown-item>
                  <el-dropdown-item>锁定</el-dropdown-item>
                  <el-dropdown-item>登出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <GlobalPagination></GlobalPagination>
    </div>
  </GlobalPage>
</template>

<script setup>
import { MoreFilled } from "@element-plus/icons-vue";
// import AddressAPI from "@/api/address";
import Api from "@/api";
import { onBeforeMount, reactive } from "vue";
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
import GlobalPagination from "@/components/GlobalPagination/index.vue";
const Data = reactive({
  tableData: [],
  page: null,
  pages: null,
  limit: null,
  total: null,
});
onBeforeMount(() => {
  GetCountryList();
});
// 获取国家列表
function GetCountryList() {
  Api.Address.countryList().then((res) => {
    let { data } = res;
    let { list, page, pages, limit, total } = data;
    Data.tableData = list;
  });
}
function clickCountry(item) {
  console.log(item);
  let { code } = item;
  GetProvincesList(code);
}
// 获取省份列表
function GetProvincesList(parent) {
  Api.Address.provincesList({ parent }).then((res) => {
    console.log(res);
  });
}
// 获取城市列表
function GetCitiesList(parent) {
  Api.Address.citiesList({ parent }).then((res) => {
    console.log(res);
  });
}
// 获取区县列表
function GetDistrictsList(parent) {
  Api.Address.districtsList({ parent }).then((res) => {
    console.log(res);
  });
}
</script>

<style scoped lang="scss">
.page {
  width: 100%;
  height: 100%;
  display: flex;

  &-left {
    min-width: 160px;
    width: 160px;
    height: 100%;
    border-right: 1px solid #c3c3c3;
    overflow: hidden;
  }

  &-right {
    flex: 1;
    height: 100%;
    padding: 0px 10px;
    box-sizing: border-box;
  }
}

.country-ul {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  font-size: 10px;

  &-li {
    $height: 60px;
    height: $height;
    min-height: $height;
    border-bottom: 1px solid #c3c3c3;
    display: flex;
    gap: 8px;
    padding-top: 10px;
    box-sizing: border-box;

    &-img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #000;
    }

    &-info {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
